<template>
    <Modal v-model:visible="isShowModal" :title="`${editId ? '编辑' : '添加'}院校`" @ok="handleOk" @cancel="handleCancel"
        ok-text="提交" cancel-text="取消" :loading="loading" :destroyOnClose="true">
        <Form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }"
            autocomplete="off" :rules="rules">
            <FormItem label="院校名称" name="name">
                <Input v-model:value="formState.name" placeholder="请输入院校名称" allowClear></Input>
            </FormItem>
            <FormItem label="院校别名">
                <Input v-model:value="formState.byName" placeholder="请输入院校名称" allowClear></Input>
            </FormItem>
            <FormItem label="办学类型" name="nature">
                <Select v-model:value="formState.nature" style="width: 100%" placeholder="请选择办学类型" allowClear>
                    <SelectOption :value="item.value" :label="item.label" :key="item.value"
                        v-for="item in SchoolNatureOption">
                        <span>{{ item.label }}</span>
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem label="院校特色" name="features">
                <Select v-model:value="formState.features" mode="multiple" style="width: 100%" placeholder="请选择院校特色"
                    allowClear>
                    <SelectOption :value="item.value" :label="item.label" :key="item.value"
                        v-for="item in SchoolFeatureOptions">
                        <span>{{ item.label }}</span>
                    </SelectOption>
                </Select>
            </FormItem>
        </Form>
    </Modal>
</template>

<script lang="ts" setup>
import { Modal, Form, Input, message, Select } from 'ant-design-vue'
import { SchoolFeatureOptions, SchoolNatureOption } from './index'
import { EnumSchoolNature, SchoolAddModel, SchoolApi } from '@/api';
import { Rule } from 'ant-design-vue/es/form';

const FormItem = Form.Item;
const SelectOption = Select.Option;

const emit = defineEmits(['ok']);

const isShowModal = ref(false)
const loading = ref(false)
const editId = ref<string>();
const formState = ref<SchoolAddModel>({
    name: '',
    byName: '',
    nature: EnumSchoolNature.公办,
    features: [],
})

const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: "请输入院校名称", trigger: 'blur' }],
    nature: [{ required: true, message: "请选择办学类型", trigger: 'change' }],
    features: [{ required: true, message: "请选择院校特色", trigger: 'change' }],
};
const handleOpen = (id?: string) => {
    if (id) {
        editId.value = id;
        getEditDetail(editId.value);
    } else {
        handleEmpty();
    }
    isShowModal.value = true;
}

// 获取编辑详情
async function getEditDetail(id: string) {
    let res = await SchoolApi.schoolEditGet(id);
    formState.value = res as any;
}

const handleOk = async () => {
    loading.value = true;

    try {
        if (editId.value) {
            await SchoolApi.schoolEditPut(editId.value, formState.value)
            message.success('修改成功')
        } else {
            await SchoolApi.schoolAdd(formState.value)
            message.success('添加成功')
        }

        emit('ok')
        handleClose();
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = true;
    }
}

const handleEmpty = () => {
    editId.value = undefined;
    formState.value = {
        name: '',
        byName: '',
        nature: EnumSchoolNature.公办,
        features: []
    };
}

function handleClose() {
    isShowModal.value = false;
}

function handleCancel() {
    handleEmpty();
    handleClose();
}

defineExpose({ handleOpen })
</script>